/*
 * @Description: 推文详情界面
 * @Author: YWJ 
 * @Date: 2022-04-22 19:20:14 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-17 13:04:37
 */
 <template>
  <div class="me-view-body">
    <el-container class="me-view-container">
      <el-main>
        <div class="me-view-card">
          <!-- 文章标题 -->
          <h1 class="me-view-title">{{ article.article.title }}</h1>
          <div class="me-view-author">
            <a class="">
              <!-- 作者头像 -->
              <img
                class="me-view-picture"
                :src="'http://chm.pengdong.top/index/get/' + article.sculpture"
              />
            </a>
            <div class="me-view-info">
              <span>{{ article.nickname }}</span>
              <div class="me-view-meta">
                <span>{{ article.article.createDate | format }}</span>
                <span style="margin-left: 6px"
                  >阅读 {{ article.article.viewCounts }}</span
                >
                <span style="margin-left: 6px">
                  评论 {{ article.article.commentCounts }}</span
                >
              </div>
            </div>
            <!-- 当前文章作者id是否等于当前登陆id -->
            <el-button
              v-if="
                this.article.article.account == this.nowUser &&
                this.nowUser != this.noUser
              "
              @click="editArticle()"
              style="position: absolute; left: 60%"
              size="mini"
              round
              icon="el-icon-edit"
              >编辑</el-button
            >

            <el-button
              v-if="
                this.article.article.account == this.nowUser &&
                this.nowUser != this.noUser
              "
              @click="deleteArticle()"
              style="position: absolute; left: 67%"
              size="mini"
              round
              icon="el-icon-delete"
              >删除</el-button
            >
          </div>
          <!-- 显示的主体部分 -->
          <div class="me-view-content">
            <article-body
              :text="article.article.articleContext"
              :pic="article.paths"
              :previewList="pic"
            ></article-body>
          </div>

          <!-- 文章的末尾 -->
          <div class="me-view-end">
            <el-alert title="End..." type="success" center :closable="false">
            </el-alert>
          </div>

          <div>
            <el-image
              style="width: 20px; height: 20px; position: absolute; left: 66%"
              :src="likeState > 0 ? likeImg[1] : likeImg[0]"
              fit="scale-down"
              @click="like"
            ></el-image>

            <p style="position: absolute; left: 68%">
              {{ article.article.likeCounts }}
            </p>

            <el-image
              style="width: 20px; height: 20px; position: absolute; left: 72%"
              :src="collectState > 0 ? collectImg[1] : collectImg[0]"
              fit="scale-down"
              @click="collect"
            ></el-image>

            <p style="position: absolute; left: 74%">
              {{ article.article.collectedCounts }}
            </p>
          </div>

          <div class="me-view-tag">
            标签
            <el-button
              size="mini"
              type="primary"
              v-for="(item, index) in tagName"
              @click="tag(tagId[index])"
              :key="index"
              round
              plain
              >{{ item }}</el-button
            >
          </div>
          <div class="me-view-comment">
            <div
              class="me-view-comment-write"
              v-if="this.nowUser != this.noUser"
            >
              <el-row :gutter="20">
                <el-col :span="2">
                  <a class="">
                    <!-- 当前登陆者头像 -->
                    <img class="me-view-picture" :src="avatar" />
                  </a>
                </el-col>
                <el-col :span="22">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2 }"
                    placeholder="你的评论..."
                    class="me-view-comment-text"
                    v-model="comment.commentContext"
                    resize="none"
                  >
                  </el-input>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="2" :offset="22">
                  <el-button
                    type="text"
                    @click="publishComment()"
                    v-if="this.nowUser != this.noUser"
                    >评论</el-button
                  >
                </el-col>
              </el-row>
            </div>

            <div class="me-view-comment-title">
              <span>{{ article.article.commentCounts }} 条评论</span>
            </div>

            <!-- 评论列表组件 -->
            <comment-item
              v-for="(c, index) in comments"
              :comment="c"
              :articleId="article.id"
              :index="index"
              :rootCommentCounts="comments.length"
              :key="index"
            >
            </comment-item>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
 
 <script>
import { findArticleById } from "@/api/article";
import {
  deleteArticleById,
  like,
  dislike,
  collect,
  discollect,
} from "@/api/article";
import ArticleBody from "@/components/article/ArticleBody.vue";
import CommentItem from "@/components/comment/CommentItemTest.vue";
import global from "@/global/global";
export default {
  components: {
    "article-body": ArticleBody,
    "comment-item": CommentItem,
  },

  data() {
    return {
      nowUser: "",
      noUser: "99999999999",
      avatar: "",
      article: {
        article: {
          title: "",
        },
      },
      pic: [],
      tagName: [],
      tagId: [],
      comments: [],
      likeState: 0,
      likeFlag: 0,
      collectState: 0,
      collectFlag: 0,
      likeImg: ["img/ArticleIcon/like.png", "img/ArticleIcon/likeOn.png"],
      collectImg: [
        "img/ArticleIcon/collect.png",
        "img/ArticleIcon/collectOn.png",
      ],
      comment: {
        commentContext: "",
        parentId: 0,
        articleId: this.$route.params.id,
        userId: localStorage.getItem("uid"),
        commentState: 1,
        nickname: localStorage.getItem("nickname"),
        sculpture: localStorage.getItem("avatar"),
      },
    };
  },
  methods: {
    like() {
      if (this.article.article.canLike == 0) {
        if (this.nowUser != this.noUser) {
          if (this.likeState == 0) {
            this.likeState = 1;
            this.article.article.likeCounts += 1;
          } else {
            this.likeState = 0;
            this.article.article.likeCounts -= 1;
          }
        } else {
          this.$confirm("您还未登陆", "信息", {
            confirmButtonText: "登陆",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$router.push({ path: `/login` });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
      }
    },
    collect() {
      if (this.article.article.canCollect == 0) {
        if (this.nowUser != this.noUser) {
          if (this.collectState == 0) {
            this.collectState = 1;
            this.article.article.collectedCounts += 1;
          } else {
            this.collectState = 0;
            this.article.article.collectedCounts -= 1;
          }
        } else {
          this.$confirm("您还未登陆", "信息", {
            confirmButtonText: "登陆",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$router.push({ path: `/login` });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }
      }
    },
    findArticleById() {
      var aid = this.$route.params.id;
      var account = localStorage.getItem("account");
      findArticleById(aid, account).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.article = res.data.data;
          console.log(this.article);
          this.likeState = res.data.data.isLike;
          this.likeFlag = res.data.data.isLike;
          this.collectState = res.data.data.isCollect;
          this.collectFlag = res.data.data.isCollect;
          for (var i = 0; i < res.data.data.paths.length; i++) {
            this.pic[i] =
              "http://chm.pengdong.top/index/get/" + res.data.data.paths[i];
          }
          this.picLength = res.data.data.paths.length;
          this.tagId = res.data.data.article.tag.split(",");
          for (var i = 0; i < this.tagId.length; i++) {
            this.tagName[i] = global.tagmap.get(this.tagId[i]);
          }
        } else {
          console.log("no");
        }
      });
    },
    publishComment() {
      var that = this;
      this.axios({
        method: "post",
        url: "http://chm.pengdong.top/article/publish-comment",
        data: this.comment,
        headers: {
          // ContentType: "application/json",
          token: localStorage.getItem("token"),
        },
      }).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          console.log("success");
          that.$message({
            message: "发布成功！",
            type: "success",
            showClose: true,
          });
          location.reload();
          console.log(vo);
        } else if (vo.code == 10001) {
          that.$message({
            message: vo.msg,
            type: "warn",
            showClose: true,
          });
        } else {
          console.log("11");
        }
      });
    },
    getComments() {
      var aid = this.$route.params.id;
      this.axios({
        method: "get",
        url: "http://chm.pengdong.top/comment/listcomment",
        params: {
          aid: aid,
        },
      }).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          console.log("success");
          this.comments = res.data.data;
          console.log(res.data.data);
        } else {
          console.log("no");
        }
      });
    },
    // 编辑
    editArticle() {
      var id = this.$route.params.id;
      this.$router.push({ path: `/editBlog/${id}` });
    },
    deleteArticle() {
      var that = this;
      var aid = this.$route.params.id;
      deleteArticleById(aid).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          console.log("success");
          that.$message({
            message: "删除成功！",
            type: "success",
            showClose: true,
          });
          this.$router.push({ path: `/` });
        } else {
          console.log("no");
        }
      });
    },
    // 点击标签到对应标签下的文章
    tag(id) {
      this.$router.push({ path: `/tag/${id}` });
    },
  },
  created() {
    this.findArticleById();
    this.getComments();
    this.nowUser = localStorage.getItem("account");
    this.avatar =
      "http://chm.pengdong.top/index/get/" + localStorage.getItem("avatar");
    console.log(this.avatar);
  },
  destroyed() {
    if (this.likeState != this.likeFlag) {
      if (this.likeState == 1) {
        var aid = this.article.article.articleId;
        var account = localStorage.getItem("account");
        like(account, aid, this.collectFlag).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            if (this.collectState != this.collectFlag) {
              if (this.collectState == 1) {
                var aid = this.article.article.articleId;
                var account = localStorage.getItem("account");
                collect(account, aid, this.likeFlag).then((res) => {
                  var vo = res.data;
                  if (vo.code == 10000) {
                    console.log(res.data.data);
                  } else {
                    console.log("no");
                  }
                });
              }
              if (this.collectState == 0) {
                var aid = this.article.article.articleId;
                var account = localStorage.getItem("account");
                discollect(account, aid, this.likeFlag).then((res) => {
                  var vo = res.data;
                  if (vo.code == 10000) {
                  } else {
                    console.log("no");
                  }
                });
              }
            }
          } else {
            console.log("no");
          }
        });
      }
      if (this.likeState == 0) {
        var aid = this.article.article.articleId;
        var account = localStorage.getItem("account");
        dislike(account, aid, this.collectFlag).then((res) => {
          var vo = res.data;
          if (vo.code == 10000) {
            if (this.collectState != this.collectFlag) {
              if (this.collectState == 1) {
                var aid = this.article.article.articleId;
                var account = localStorage.getItem("account");
                collect(account, aid, this.likeFlag).then((res) => {
                  var vo = res.data;
                  if (vo.code == 10000) {
                    console.log(res.data.data);
                  } else {
                    console.log("no");
                  }
                });
              }
              if (this.collectState == 0) {
                var aid = this.article.article.articleId;
                var account = localStorage.getItem("account");
                discollect(account, aid, this.likeFlag).then((res) => {
                  var vo = res.data;
                  if (vo.code == 10000) {
                  } else {
                    console.log("no");
                  }
                });
              }
            }
          } else {
            console.log("no");
          }
        });
      }
    } else {
      if (this.collectState != this.collectFlag) {
        if (this.collectState == 1) {
          var aid = this.article.article.articleId;
          var account = localStorage.getItem("account");
          collect(account, aid, this.likeFlag).then((res) => {
            var vo = res.data;
            if (vo.code == 10000) {
              console.log(res.data.data);
            } else {
              console.log("no");
            }
          });
        }
        if (this.collectState == 0) {
          var aid = this.article.article.articleId;
          var account = localStorage.getItem("account");
          discollect(account, aid, this.likeFlag).then((res) => {
            var vo = res.data;
            if (vo.code == 10000) {
            } else {
              console.log("no");
            }
          });
        }
      }
    }
  },
};
</script>
 
 <style>
.me-view-body {
  margin: 100px auto 140px;
}

.me-view-container {
  width: 800px;
}

.el-main {
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: white;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
}

.me-view-end {
  margin-top: 20px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-tag-item {
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 30px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}

.form h3 {
  margin: 5px;
  font-weight: 500 !important;
}
.form .m-small {
  margin-left: 5px;
  padding: 4px 5px;
}
.el-form .textarea {
  margin-top: 5px;
  margin-bottom: 15px;
}
.el-form textarea {
  padding: 6px 8px;
}
.el-form textarea,
.el-form input {
  color: black;
}
.el-form .el-form-item__label {
  padding-right: 3px;
}
</style>
